<template>
    <div class="bigBox">
        <h1>
            <a href="https://aafx11.github.io/fast-dataview-ui/docs/install.html" target="_blank">
                Fast-Dataview-UI 官方文档
            </a>
        </h1>
        <div class="table1">
            <FScrollTable :data="tableData" :toggleDur="1000" :columns="table1Header" :pageSize="12" :wrap='false'>
                <template #operation="{ params }">
                    <FProgress :percent="params.row.value"></FProgress>
                </template>
            </FScrollTable>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const table1Header = ref([
    { label: '序号', type: 'index', width: 70 },
    { prop: 'name', label: '名称', type: 'scroll', width: 250 },
    { prop: 'title', label: '标题' },
    { prop: 'num', label: '字数' },
    { label: '操作', slot: 'operation' },
])
const tableData: any = ref([])
for (let i = 0; i < 20000; i++) {
    const obj = {
        name: "这是一个很长的测试名称，这是一个很长的测试名称" + (i + 1),
        title: "测试标题" + (i + 1),
        num: (i + 1) * 100,
        value: i * 5
    }
    tableData.value.push(obj)
} 
</script>

<style lang="scss" scoped>
.bigBox {
    width: 100%;
    height: 100%;
    overflow: auto;
    @include scroll-bar();

    h1 {
        font-size: 25px;
        text-align: center;
    }

    .table1 {
        width: 100%;
        color: var(--backColorText);

        :deep(.f-scroll-table) {
            color: var(--backColorText);

            .f-scroll-table__head {
                display: grid;
                grid-template-columns: 70px 250px 1fr 1fr 1fr;
            }

            .f-scroll-table__content {
                .f-scroll-table__row {
                    display: grid;
                    grid-template-columns: 70px 250px 1fr 1fr 1fr;
                }
            }

            .f-scroll-table__row-wrap {
                .text-content {
                    color: var(--backColorText);
                }
            }
        }
    }
}
</style>